<template>
  <el-container>
    <el-aside width="200px">
      <div class="logo">黑马头条</div>
      <!-- 菜单 -->
      <!-- 
        el-menu : 菜单组件 
           default-active  默认高亮
           background-color : 背景颜色
           text-color : 文字颜色
           active-text-color 高亮文字颜色

        el-submenu :   子菜单组件(可展开) 

        el-menu-item : 菜单元素最小单位
            index : 默认高亮所识别的值
       $route.path  => /home/list  or /home/publish

       -->
      <el-menu
        :default-active="$route.path"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
      >
        <el-menu-item index="/home/list">
          <i class="el-icon-s-operation"></i>
          <span slot="title">文章列表</span>
        </el-menu-item>
        <el-menu-item index="/home/publish">
          <i class="el-icon-s-promotion"></i>
          <span slot="title">发布文章</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <img :src="$axios.defaults.baseURL + user.head_img" alt="" />
        <span>{{ user.nickname }}</span>
        <a href="#" @click.prevent="logout">退出</a>
      </el-header>
      <el-main>
        <!-- List 和  Publish 的出口 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      user: {},
    }
  },
  created() {
    this.user = JSON.parse(localStorage.getItem('user'))
  },
  methods: {
    // 退出
    async logout() {
      try {
        await this.$confirm('此操作将退出该账户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })

        console.log('点击了确定')
        //1. 删除本地 token 和 user
        localStorage.removeItem('token')
        localStorage.removeItem('user')

        //2. 提示
        this.$message.success('退出成功')

        //3. 跳转
        // this.$router.back()
        this.$router.push('/login')
      } catch (error) {
        console.log('点击了取消')
      }
    },
  },
}
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
}

.el-header {
  background-color: #b3c0d1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
  }
  span {
    margin: 0 20px;
  }
}
.el-aside {
  background-color: #545c64;
  .logo {
    height: 60px;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    line-height: 60px;
    font-size: 32px;
    color: #fff;
  }
}

.el-main {
  background-color: #e9eef3;
}
</style>
